<template>
  <view class="content">
    <view class="input-group">
      <view class="center">
        <text class="title"> {{ fontStatus ?  '' : '手机号'}}</text>
        <view class="row">
          <input type="number" class="mxg-input" v-model="mobile" maxlength="11" placeholder="请输入手机号" />
        </view>
      </view>
      <view class="center">
        <text class="title">{{ fontStatus ?  '' : '验证码'}}</text>
        <view class="row">
          <input type="number" class="mxg-input" v-model="code" maxlength="6" placeholder="请输入验证码" />
          <mxg-code :mobile="mobile" templateCode="SMS_19945411613"></mxg-code>
        </view>
      </view>

    </view>
    <button type="primary" class="primary" @click="subimiHandler">提交</button>
  </view>
</template>

<script>
import api from '@/api/auth.js'
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => { }
    },
    fontStatus:Boolean,
  },
  data () {
    return {
      mobile: '',
      code: '',
      data: null,//其他页面传递过来的数据
    }
  },
  created () {
    if (this.userInfo != {}) {
      this.data = { userInfo: this.userInfo }
      // console.log(this.userInfo  , 'userIn123fo')
    }
  },
  onLoad (option) {
    this.data = option.data && JSON.parse(option.data)
    console.log('option', this.data)
    //是否有传title 字段过来 有的话  则 进行更换字段
    if (option.title) {
      //设置导航标题
      uni.setNavigationBarTitle({
        title: option.title
      })
    }
  },
  methods: {
    //提交手机号、验证码等
    async	subimiHandler () {
      const { mobile, code } = this
      if (!this.$util.checkStr(mobile, 'mobile')) {
        this.$util.msg('手机号码格式不正确')
        return
      }

      if (!this.$util.checkStr(code, 'code')) {
        this.$util.msg('验证码错误')
        return
      }

      try {
        uni.showLoading({ mask: true })

        const data = { mobile, code, ...this.data }
        const res = await api.updateUserMobile(data)
        uni.hideLoading()
        this.$util.msg(res.message)

        if (res.code !== 20000) return

        //成功 更新状态值  
        this.successCallBack(res.data)

      } catch (e) {
        this.$util.msg('操作失败')
        uni.hideLoading()
      }
    },
    successCallBack (data) {
      this.$util.msg('提交成功')
      this.$store.commit('setToken', data)
      setTimeout(() => {
        this.navBack(2)
      }, 300)
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: $xg-color-grey;
}
.input-group {
  padding: 0 25rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  .title {
    font-size: 35rpx;
    height: 100rpx;
    width: 190rpx;
    line-height: 100rpx;
  }
  .mxg-input {
    flex: 1;
    height: 60rpx;
  }
}
.content {
  margin: 80rpx 20rpx;
  .row {
    width: 100%;
  }
}

button[type='primary'] {
  background-color: $xg-color-primary !important;
  margin-top: 80rpx;
}
</style>
